<template>
<div class="app-container">
  <div>
    <div class="table-container">
      <el-table ref="studentTable"
                :data="types"
                style="width: 100%"
                v-loading="listLoading"
      >
        <el-table-column label="商品&请求类型名"  align="center" min-width="50%">
          <template slot-scope="scope">
            <p>{{scope.row.typeName}}</p>
          </template>
        </el-table-column>
        <el-table-column label="操作"  align="center" min-width="50%">
          <template slot-scope="scope">
            <el-tooltip :enterable = false class="item" effect="light" content="修改" placement="top" >
              <el-button
                size="mini"
                icon = "el-icon-edit-outline"
                @click= "edit(scope.$index, scope.row)"
                circle>
              </el-button>
            </el-tooltip>
            <el-tooltip :enterable = false class="item" effect="light" content="删除" placement="top" >
              <el-button
                size="mini"
                type="danger"
                icon = "el-icon-delete"
                @click="deleteItem(scope.$index, scope.row)"
                circle>
              </el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="batch-operate-container">
      <el-button @click="create" icon="el-icon-plus" size = "small">新建类型</el-button>
    </div>

    <el-dialog :visible.sync="editing" :title="isUpdating? '修改':'新建' " width="30%" >
      <el-form :model="entityForm" label-width="70px" ref="form" label-position="top">
        <el-form-item label="商品&请求类型名">
          <el-input v-model="entityForm.typeName"></el-input>
        </el-form-item>
      </el-form>
      <span class="dialog-footer" slot="footer">
          <el-button @click="save" type="primary">确 定</el-button>
          <el-button @click="editing = false">取 消</el-button>
        </span>
    </el-dialog>
  </div>
  <el-backtop target=".app-container"></el-backtop>
</div>

</template>
<script>
import {addType, deleteType, fetchAllTypes, updateType} from "../../../api/admin";

export default {
  name: "AdminTerm",
  data() {
    return {
      reverse: true,
      types: [],
      entityForm: {},
      editing: false,
      isUpdating:false,
      listLoading:false
    };
  },
  methods: {
    getAllTypes() {
      this.listLoading = true
      fetchAllTypes().then(res => {
        this.types = res.data;
        this.listLoading = false
      })
    },
    edit(index, row){
      this.entityForm = Object.assign({}, this.types.find(i=>{return  i.typeId === row.typeId}))
      this.isUpdating = true
      this.editing = true
    },
    async deleteItem(index, row) {
      const confirmResult = await this.$confirm('此操作将永久删除该类型, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)
      if (confirmResult !== 'confirm') {
        return ;
      }
      deleteType(row.typeId).then(res => {
        this.$message.success("操作成功！！！");
        this.getAllTypes()
      })
    },
    save() {
      if(!this.isUpdating) {
        addType(this.entityForm).then(() => {
          this.$message.success("创建成功")
          this.getAllTypes();
        }).finally(() => {
          this.editing = false
        })
      }
      else{
        updateType(this.entityForm).then(() => {
          this.$message.success("修改成功")
          this.getAllTypes();
        }).finally(() => {
          this.editing = false
        })
      }
    },
    create() {
      this.entityForm = {};
      this.isUpdating = false
      this.editing = true;
    },
  },

  created() {
    this.getAllTypes()
  }
}
</script>
